<template>
  <div class="home">
    <Slider />
    <div class="hotpicture">
      <div class="topdiv">
        <div class="left">
          <span>热门航拍点</span>
        </div>
        <a href="" class="right">
          <span>热门航拍集锦</span>
          <i class="hh4l _2AJ_"></i>
        </a>
        <!-- <a href="" class="right">
          <span>热门航拍集锦</span>
        </a> -->
      </div>
      <div class="picdiv">
        <div class="ul-pic">
          <div class="li-pic" v-for="item in data" :key="item.id">
            <div class="imgBoxPic">
              <img :src="item.img" class="imgLabel" />
            </div>
            <p>{{ item.address }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 页面内容 -->
    <div class="content">
      <div class="content-title">
        <div class="titletext">
          <span class="spantext">精选</span>
        </div>
      </div>
      <div class="spantextCotentBox">
        <!-- 自然 -->
        <div class="content-page" v-loading='loadingNature'>
          <div class="connature">
            <div class="toptitle">
              <div class="text">自然</div>
              <div>
                <el-pagination background fix="right" layout="prev, pager, next"
                  :total="naturalTotal" @current-change="naturalHandleCurrentChange"
                  :current-page.sync="naturalCurrentPage" :page-size="naturalPageSize">
                </el-pagination>
              </div>
            </div>
            <!-- 自然的信息图片 -->
            <div class="contentpic">
              <div class="onebox" v-for="(item, index) in naturalData" :key="index">
                <!-- 图片 -->
                <div class="imgBox mouseIn">
                  <img :src="item.img" @click="toDetail('naturalData', item,'getNaturalData')"
                    class="imgStyle girlImg" alt="" />
                </div>
                <!--图片下的文字 -->
                <div class="imgBtnBox">
                  <!-- 图片描述 -->
                  <div class="textBox mouseIn"
                    @click="toDetail('naturalData', item,'getNaturalData')">
                    {{ item.text }}
                  </div>
                  <!-- 设备 -->
                  <div class="dispalyStyle equipmentBox">
                    <div class="equipmentTxt">设备：</div>
                    <div class="equipmentName">{{ item.phone }}</div>
                  </div>
                  <!-- 点赞和查看记录 -->
                  <div class="dispalyStyle supportDisplay">
                    <div class="lookPersonBox dispalyStyle">
                      <div class="lookIconBox">
                        <svg t="1651737036374" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3011" width="18" height="19">
                          <path
                            d="M512 209.403241c-201.731514 0-374.009206 125.476783-443.808922 302.596759 69.798692 177.119977 242.077408 302.596759 443.808922 302.596759 201.933105 0 374.010229-125.476783 443.808922-302.596759C886.009206 334.880023 713.933105 209.403241 512 209.403241zM512 713.731514c-111.355157 0-201.731514-90.375334-201.731514-201.731514s90.375334-201.731514 201.731514-201.731514 201.731514 90.375334 201.731514 201.731514S623.355157 713.731514 512 713.731514zM512 390.961296c-66.772776 0-121.038704 54.265928-121.038704 121.038704s54.265928 121.038704 121.038704 121.038704 121.038704-54.265928 121.038704-121.038704S578.772776 390.961296 512 390.961296z"
                            p-id="3012" fill="#707070"></path>
                        </svg>
                      </div>
                      <div>{{ item.browse }}</div>
                    </div>
                    <div class="supportBox dispalyStyle ">
                      <div class="supportIconBox" v-if="!item.support"
                        @click="agreeFun(item.id, item.agree,'getNaturalData')">
                        <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="2639" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#707070" p-id="2640"></path>
                        </svg>
                      </div>
                      <!-- 取消点赞 -->
                      <div v-else class="supportIconBox"
                        @click="noAgreeFun(item.id, item.agree,'getNaturalData')">
                        <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3207" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#87b9fe" p-id="3208"></path>
                        </svg>
                      </div>
                      <div class="">{{ item.agree }}</div>

                    </div>
                  </div>
                  <!-- 拍摄者名称 和时间 -->
                  <div class="dispalyStyle dispalyJ">
                    <div class="pusher dispalyStyle">
                      <el-avatar class="avatar" size="small" :src="item.userimg"></el-avatar>
                      <div class="userName">{{ item.username }}</div>
                    </div>
                    <div class="pushTime">{{ getDateYYMMDD(item.time) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 城市 -->
        <div class="content-page" v-loading='loadingCity'>
          <div class="connature">
            <div class="toptitle">
              <div class="text">城市</div>
              <div>
                <el-pagination background fix="right" layout="prev, pager, next" :total="cityTotal"
                  @current-change="cityHandleCurrentChange" :current-page.sync="cityCurrentPage"
                  :page-size="cityPageSize">
                </el-pagination>
              </div>
            </div>
            <div class="contentpic">
              <div class="onebox" v-for="(item, index) in cityData" :key="index">
                <!-- 图片 -->
                <div class="imgBox mouseIn">
                  <img :src="item.img" @click="toDetail('cityData', item,'getCityData')"
                    class="imgStyle" alt="" />
                </div>
                <!--图片下的文字 -->
                <div class="imgBtnBox">
                  <!-- 图片描述 -->
                  <div class="textBox mouseIn" @click="toDetail('cityData', item,'getCityData')">
                    {{ item.text }}
                  </div>
                  <!-- 设备 -->
                  <div class="dispalyStyle equipmentBox">
                    <div class="equipmentTxt">设备：</div>
                    <div class="equipmentName">{{ item.phone }}</div>
                  </div>
                  <!-- 点赞和查看记录 -->
                  <div class="dispalyStyle supportDisplay">
                    <div class="lookPersonBox dispalyStyle">
                      <div class="lookIconBox">
                        <svg t="1651737036374" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3011" width="18" height="19">
                          <path
                            d="M512 209.403241c-201.731514 0-374.009206 125.476783-443.808922 302.596759 69.798692 177.119977 242.077408 302.596759 443.808922 302.596759 201.933105 0 374.010229-125.476783 443.808922-302.596759C886.009206 334.880023 713.933105 209.403241 512 209.403241zM512 713.731514c-111.355157 0-201.731514-90.375334-201.731514-201.731514s90.375334-201.731514 201.731514-201.731514 201.731514 90.375334 201.731514 201.731514S623.355157 713.731514 512 713.731514zM512 390.961296c-66.772776 0-121.038704 54.265928-121.038704 121.038704s54.265928 121.038704 121.038704 121.038704 121.038704-54.265928 121.038704-121.038704S578.772776 390.961296 512 390.961296z"
                            p-id="3012" fill="#707070"></path>
                        </svg>
                      </div>
                      <div>{{ item.browse }}</div>
                    </div>
                    <div class="supportBox dispalyStyle ">
                      <!-- item.support -->
                      <div class="supportIconBox" v-if="!item.support"
                        @click="agreeFun(item.id, item.agree,'getCityData')">
                        <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="2639" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#707070" p-id="2640"></path>
                        </svg>
                      </div>
                      <!-- 取消点赞 -->
                      <div v-else class="supportIconBox"
                        @click="noAgreeFun(item.id, item.agree,'getCityData')">
                        <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3207" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#87b9fe" p-id="3208"></path>
                        </svg>
                      </div>
                      <div class="">{{ item.agree }}</div>
                    </div>
                  </div>
                  <!-- 拍摄者名称 和时间 -->
                  <div class="dispalyStyle dispalyJ">
                    <div class="pusher dispalyStyle">
                      <el-avatar class="avatar" size="small" :src="item.userimg"></el-avatar>
                      <div class="userName">{{ item.username }}</div>
                    </div>
                    <div class="pushTime">{{ getDateYYMMDD(item.time) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 运动 -->
        <div class="content-page" v-loading='loadingMotion'>
          <div class="connature">
            <div class="toptitle">
              <div class="text">运动</div>
              <div>
                <el-pagination background fix="right" layout="prev, pager, next"
                  :total="motionTotal" @current-change="motionHandleCurrentChange"
                  :current-page.sync="motionCurrentPage" :page-size="motionPageSize">
                </el-pagination>
              </div>
            </div>
            <div class="contentpic">
              <div class="onebox" v-for="(item, index) in motionData" :key="index">
                <!-- 图片 -->
                <div class="imgBox mouseIn">
                  <img :src="item.img" @click="toDetail('motionData', item,'getCityData')"
                    class="imgStyle" alt="" />
                </div>
                <!--图片下的文字 -->
                <div class="imgBtnBox">
                  <!-- 图片描述 -->
                  <div class="textBox mouseIn" @click="toDetail('motionData', item,'getCityData')">
                    {{ item.text }}
                  </div>
                  <!-- 设备 -->
                  <div class="dispalyStyle equipmentBox">
                    <div class="equipmentTxt">设备：</div>
                    <div class="equipmentName">{{ item.phone }}</div>
                  </div>
                  <!-- 点赞和查看记录 -->
                  <div class="dispalyStyle supportDisplay">
                    <div class="lookPersonBox dispalyStyle">
                      <div class="lookIconBox">
                        <svg t="1651737036374" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3011" width="18" height="19">
                          <path
                            d="M512 209.403241c-201.731514 0-374.009206 125.476783-443.808922 302.596759 69.798692 177.119977 242.077408 302.596759 443.808922 302.596759 201.933105 0 374.010229-125.476783 443.808922-302.596759C886.009206 334.880023 713.933105 209.403241 512 209.403241zM512 713.731514c-111.355157 0-201.731514-90.375334-201.731514-201.731514s90.375334-201.731514 201.731514-201.731514 201.731514 90.375334 201.731514 201.731514S623.355157 713.731514 512 713.731514zM512 390.961296c-66.772776 0-121.038704 54.265928-121.038704 121.038704s54.265928 121.038704 121.038704 121.038704 121.038704-54.265928 121.038704-121.038704S578.772776 390.961296 512 390.961296z"
                            p-id="3012" fill="#707070"></path>
                        </svg>
                      </div>
                      <div>{{ item.browse }}</div>
                    </div>
                    <div class="supportBox dispalyStyle ">
                      <div class="supportIconBox" v-if="!item.support"
                        @click="agreeFun(item.id, item.agree,'getMotionData')">
                        <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="2639" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#707070" p-id="2640"></path>
                        </svg>
                      </div>
                      <!-- 取消点赞 -->
                      <div v-else class="supportIconBox"
                        @click="noAgreeFun(item.id, item.agree,'getMotionData')">
                        <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3207" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#87b9fe" p-id="3208"></path>
                        </svg>
                      </div>
                      <div class="">{{ item.agree }}</div>
                    </div>
                  </div>
                  <!-- 拍摄者名称 和时间 -->
                  <div class="dispalyStyle dispalyJ">
                    <div class="pusher dispalyStyle">
                      <el-avatar class="avatar" size="small" :src="item.userimg"></el-avatar>
                      <div class="userName">{{ item.username }}</div>
                    </div>
                    <div class="pushTime">{{ getDateYYMMDD(item.time) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 人物 -->
        <div class="content-page" v-loading='loadingPersonage'>
          <div class="connature">
            <div class="toptitle">
              <div class="text">人物</div>
              <div>
                <el-pagination background fix="right" layout="prev, pager, next"
                  :total="personageTotal" @current-change="personageHandleCurrentChange"
                  :current-page.sync="personageCurrentPage" :page-size="personagePageSize">
                </el-pagination>
              </div>
            </div>
            <div class="contentpic">
              <div class="onebox" v-for="(item, index) in personageData" :key="index">
                <!-- 图片 -->
                <div class="imgBox mouseIn">
                  <img :src="item.img" @click="toDetail('personageData', item,'getCityData')"
                    class="imgStyle" alt="" />
                </div>
                <!--图片下的文字 -->
                <div class="imgBtnBox">
                  <!-- 图片描述 -->
                  <div class="textBox mouseIn"
                    @click="toDetail('personageData', item,'getCityData')">
                    {{ item.text }}
                  </div>
                  <!-- 设备 -->
                  <div class="dispalyStyle equipmentBox">
                    <div class="equipmentTxt">设备：</div>
                    <div class="equipmentName">{{ item.phone }}</div>
                  </div>
                  <!-- 点赞和查看记录 -->
                  <div class="dispalyStyle supportDisplay">
                    <div class="lookPersonBox dispalyStyle">
                      <div class="lookIconBox">
                        <svg t="1651737036374" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3011" width="18" height="19">
                          <path
                            d="M512 209.403241c-201.731514 0-374.009206 125.476783-443.808922 302.596759 69.798692 177.119977 242.077408 302.596759 443.808922 302.596759 201.933105 0 374.010229-125.476783 443.808922-302.596759C886.009206 334.880023 713.933105 209.403241 512 209.403241zM512 713.731514c-111.355157 0-201.731514-90.375334-201.731514-201.731514s90.375334-201.731514 201.731514-201.731514 201.731514 90.375334 201.731514 201.731514S623.355157 713.731514 512 713.731514zM512 390.961296c-66.772776 0-121.038704 54.265928-121.038704 121.038704s54.265928 121.038704 121.038704 121.038704 121.038704-54.265928 121.038704-121.038704S578.772776 390.961296 512 390.961296z"
                            p-id="3012" fill="#707070"></path>
                        </svg>
                      </div>
                      <div>{{ item.browse }}</div>
                    </div>
                    <div class="supportBox dispalyStyle ">
                      <div class="supportIconBox" v-if="!item.support"
                        @click="agreeFun(item.id, item.agree,'getPersonageData')">
                        <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="2639" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#707070" p-id="2640"></path>
                        </svg>
                      </div>
                      <!-- 取消点赞 -->
                      <div v-else class="supportIconBox"
                        @click="noAgreeFun(item.id, item.agree,'getPersonageData')">
                        <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3207" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#87b9fe" p-id="3208"></path>
                        </svg>
                      </div>
                      <div class="">{{ item.agree }}</div>
                    </div>
                  </div>
                  <!-- 拍摄者名称 和时间 -->
                  <div class="dispalyStyle dispalyJ">
                    <div class="pusher dispalyStyle">
                      <el-avatar class="avatar" size="small" :src="item.userimg"></el-avatar>
                      <div class="userName">{{ item.username }}</div>
                    </div>
                    <div class="pushTime">{{ getDateYYMMDD(item.time) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 签约摄影师 -->
        <div class="content-page" v-loading='loadingPhotographer'>
          <div class="connature">
            <div class="toptitle">
              <div class="text">签约摄影师</div>
              <div>
                <el-pagination background fix="right" layout="prev, pager, next"
                  :total="contractPhoTotal" @current-change="contractPhoHandleCurrentChange"
                  :current-page.sync="contractPhoCurrentPage" :page-size="contractPhoPageSize">
                </el-pagination>
              </div>
            </div>
            <div class="contentpic">
              <div class="onebox" v-for="(item, index) in contractPhoData" :key="index">
                <!-- 图片 -->
                <div class="imgBox mouseIn">
                  <img :src="item.img" @click="toDetail('contractPhoData', item)" class="imgStyle"
                    alt="" />
                </div>
                <!--图片下的文字 -->
                <div class="imgBtnBox">
                  <!-- 图片描述 -->
                  <div class="textBox mouseIn"
                    @click="toDetail('contractPhoData', item,'getCityData')">
                    {{ item.text }}
                  </div>
                  <!-- 设备 -->
                  <div class="dispalyStyle equipmentBox">
                    <div class="equipmentTxt">设备：</div>
                    <div class="equipmentName">{{ item.phone }}</div>
                  </div>
                  <!-- 点赞和查看记录 -->
                  <div class="dispalyStyle supportDisplay">
                    <div class="lookPersonBox dispalyStyle">
                      <div class="lookIconBox">
                        <svg t="1651737036374" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3011" width="18" height="19">
                          <path
                            d="M512 209.403241c-201.731514 0-374.009206 125.476783-443.808922 302.596759 69.798692 177.119977 242.077408 302.596759 443.808922 302.596759 201.933105 0 374.010229-125.476783 443.808922-302.596759C886.009206 334.880023 713.933105 209.403241 512 209.403241zM512 713.731514c-111.355157 0-201.731514-90.375334-201.731514-201.731514s90.375334-201.731514 201.731514-201.731514 201.731514 90.375334 201.731514 201.731514S623.355157 713.731514 512 713.731514zM512 390.961296c-66.772776 0-121.038704 54.265928-121.038704 121.038704s54.265928 121.038704 121.038704 121.038704 121.038704-54.265928 121.038704-121.038704S578.772776 390.961296 512 390.961296z"
                            p-id="3012" fill="#707070"></path>
                        </svg>
                      </div>
                      <div>{{ item.browse }}</div>
                    </div>
                    <div class="supportBox dispalyStyle ">
                      <!-- 点赞 -->
                      <div class="supportIconBox" v-if="!item.support"
                        @click="agreeFun(item.id, item.agree,'getContractPhoData')">
                        <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="2639" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#707070" p-id="2640"></path>
                        </svg>
                      </div>
                      <!-- 取消点赞 -->
                      <div v-else class="supportIconBox"
                        @click="noAgreeFun(item.id, item.agree,'getContractPhoData')">
                        <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3207" width="18" height="18">
                          <path
                            d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                            fill="#87b9fe" p-id="3208"></path>
                        </svg>
                      </div>
                      <div class="">{{ item.agree }}</div>
                    </div>
                  </div>
                  <!-- 拍摄者名称 和时间 -->
                  <div class="dispalyStyle dispalyJ">
                    <div class="pusher dispalyStyle">
                      <el-avatar class="avatar" size="small" :src="item.userimg"></el-avatar>
                      <div class="userName">{{ item.username }}</div>
                    </div>
                    <div class="pushTime">{{ getDateYYMMDD(item.time) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 热门标签 -->
        <div class="content-page" v-loading='loadingHot'>
          <div class="connature">
            <div class="toptitle">
              <div class="text">热门标签</div>
              <div>
                <el-pagination background fix="right" layout="prev, pager, next" :total="hotTotal"
                  @current-change="hotHandleCurrentChange" :current-page.sync="hotCurrentPage"
                  :page-size="hotPageSize">
                </el-pagination>
              </div>
            </div>
            <div class="contentpic hotStyle">
              <div class="hotItemBox" v-for="item in hotData" :key="item.id">
                <img class="hotimg" :src="item.img" />
                <p class="hotTxt">{{ item.text }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <SelectedDialog :selectedDialogVisible="selectedDialogVisible" :data="selectedData"
      @closeSelectedDialog="closeSelectedDialog" /> -->
    <MoreDetail :dialogVisible='selectedDialogVisible' :data="dialogData"
      @closeetailDialog='closeSelectedDialog' @upData='init' />
    <!-- :data="dialogData"
    @closeetailDialog='closeSelectedDialog' @upData='init' -->
    <!--  @agreeChange='changeFunAgreeFun'
      @noAgreeChange="changeFunNoAgreeFun" -->
  </div>
</template>

<script>
import Slider from "../../components/looppic.vue";
import SelectedDialog from "./components/selectedDialog/index.vue";
import MoreDetail from "../dialog/index.vue"

export default {
  name: "Home",
  data() {
    return {
      data: [],
      naturalPageSize: 4, //自然
      naturalCurrentPage: 1,
      naturalData: null,
      naturalTotal: null,
      //城市
      cityPageSize: 4,
      cityCurrentPage: 1,
      cityData: null,
      cityTotal: null,
      //运动
      motionPageSize: 4,
      motionCurrentPage: 1,
      motionData: null,
      motionTotal: null,
      // 人物
      personagePageSize: 4,
      personageCurrentPage: 1,
      personageData: null,
      personageTotal: null,
      //签约摄影师 contractPhotographer
      contractPhoPageSize: 4,
      contractPhoCurrentPage: 1,
      contractPhoData: null,
      contractPhoTotal: null,
      //热门
      hotPageSize: 6,
      hotCurrentPage: 1,
      hotData: null,
      hotTotal: null,
      // 模态弹窗
      selectedDialogVisible: false,
      selectedData: {},
      // 点赞
      showAgreed: false,
      userInfo: null,
      supportDatas: null,
      // 加载
      loadingNature: false,
      loadingCity: false,
      loadingMotion: false,
      loadingPersonage: false,
      loadingPhotographer: false,
      loadingHot: false,

      // 
      dialogData: {},
      moduleName: null,
      modeleFun: null,
    };
  },
  components: {
    Slider,
    SelectedDialog, //模态弹窗
    MoreDetail,
  },
  computed: {},
  mounted() {
    this.getUserInfo();
    window.scrollTo(0, 0);
    //监听滚轮事件
    window.addEventListener("scroll", this.getscroll);
    this.mounted();
    // 获取用户信息
    // 获取所有点赞数据
    this.getSupportData();
    this.init();
  },
  methods: {
    async init() {
      // 自然
      this.getNaturalDatas();
      this.getNaturalData();
      // 城市
      this.getCityDatas();
      this.getCityData();
      // 运动
      this.getMotionDatas();
      this.getMotionData();
      // 人物
      this.getPersonageDatas();
      this.getPersonageData();
      // 签约摄影师
      this.getContractPhoDatas();
      this.getContractPhoData();
      // 热门
      this.getHotDatas();
      this.getHotData();

    },
    getUserInfo() {
      let is_login = localStorage.getItem("islogin");
      if (is_login) {
        let params = {
          email: is_login,
        }
        this.$axios.post('/api/getUserInfo', params).then((res) => {
          let { data } = res
          this.userInfo = data[0];
        })
      }
    },
    async mounted() {
      // let re = await this.$axios(`/api/page?day=${day}`);
      let res = await this.$axios.get("/api/hotpic?day=1");
      this.data = res.data;
    },
    // 点赞显示
    isNoShowFun(id) {

    },
    fun() {
      return 99
    },
    //滚轮
    getscroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      let contentTitle = document.querySelector(".content-title");
      if (this.scroll > 800) {
        contentTitle.style.top = "0";
      }
    },
    // 改变自然的当前页
    naturalHandleCurrentChange(val) {
      this.naturalCurrentPage = val;
      this.getNaturalData();
    },
    // 获取自然的所有数据
    getNaturalDatas() {
      let params = {
        module: "natural",
      };
      this.$axios.post("/api/naturalDatas", params).then((res) => {
        let { data } = res;
        this.naturalTotal = data.length;
      });
    },
    // 获取所有点赞数据
    getSupportData() {
      this.$axios('/api/supportData').then((res) => {
        let { data } = res
        this.supportDatas = data;
      })
    },
    // 如果当前登录的用户点赞了 就显示取消的带点赞icon
    async isAgreeFun(currentData, name) {
      let res = await this.$axios('/api/supportData')
      let { data } = res;
      let userId = this.userInfo ? this.userInfo.id : null;
      let newData = [...currentData]
      if (data.length > 0) {
        newData.forEach((el, index) => {
          for (let i = 0; i < data.length; i++) {
            if (userId == data[i].user_id && data[i].selected_id == el.id) {
              el['support'] = true;
            }
          }
        });
      } else {
        arr = [...newData]
      }
      this[name] = newData;
      if (this.dialogData && this.moduleName == name) {
        this.dialogDataFun(newData, this.dialogData.id);
      }
    },
    dialogDataFun(newData, id) {
      newData.forEach((el) => {
        if (el.id == id) {
          this.dialogData = el;
        }
      })
    },
    // 获取自然的4个数据
    getNaturalData() {
      // this.loadingNature = true;
      let params = {
        module: "natural",
        pageSize: this.naturalPageSize,
        currentPage: this.naturalCurrentPage,
      };
      this.$axios.post("/api/naturalData", params).then((res) => {
        let { data } = res;
        this.isAgreeFun(data, 'naturalData');
        // this.loadingNature = false;
      });
    },
    // 改变 城市 的当前页
    cityHandleCurrentChange(val) {
      this.cityCurrentPage = val;
      this.getCityData();
    },
    // 获取 城市 的所有数据
    getCityDatas() {
      let params = {
        module: "city",
      };
      this.$axios.post("/api/naturalDatas", params).then((res) => {
        let { data } = res;
        this.cityTotal = data.length;
      });
    },
    // 获取 城市 的4个数据
    getCityData() {
      // this.loadingCity = true;
      let params = {
        module: "city",
        pageSize: this.cityPageSize,
        currentPage: this.cityCurrentPage,
      };
      this.$axios.post("/api/naturalData", params).then((res) => {
        let { data } = res;
        this.cityData = null;// data;
        this.isAgreeFun(data, 'cityData');
        // this.loadingCity = false;
      });
    },
    // 改变 运动 的当前页
    motionHandleCurrentChange(val) {
      this.motionCurrentPage = val;
      this.getMotionData();
    },
    // 获取 运动 的所有数据
    getMotionDatas() {
      let params = {
        module: "motion",
      };
      this.$axios.post("/api/naturalDatas", params).then((res) => {
        let { data } = res;
        this.motionTotal = data.length;
      });
    },
    // 获取 运动 的4个数据
    getMotionData() {
      // this.loadingMotion = true;
      let params = {
        module: "motion",
        pageSize: this.motionPageSize,
        currentPage: this.motionCurrentPage,
      };
      this.$axios.post("/api/naturalData", params).then((res) => {
        let { data } = res;
        this.motionData = null;//data;
        this.isAgreeFun(data, 'motionData');
        // this.loadingMotion = false;
      });
    },
    /**
     * 人物  模块
     */
    // 改变 人物 的当前页
    personageHandleCurrentChange(val) {
      this.personageCurrentPage = val;
      this.getPersonageData();
    },
    // 获取 人物 的所有数据
    getPersonageDatas() {
      let params = {
        module: "personage",
      };
      this.$axios.post("/api/naturalDatas", params).then((res) => {
        let { data } = res;
        this.personageTotal = data.length;
      });
    },
    // 获取 人物 的4个数据
    getPersonageData() {
      // this.loadingPersonage = true;
      let params = {
        module: "personage",
        pageSize: this.personagePageSize,
        currentPage: this.personageCurrentPage,
      };
      this.$axios.post("/api/naturalData", params).then((res) => {
        let { data } = res;
        this.personageData = null;//data;
        this.isAgreeFun(data, 'personageData');
        // this.loadingPersonage = false;
      });
    },
    /**
     * 签约摄影师  模块
     */
    // 改变 签约摄影师 的当前页
    contractPhoHandleCurrentChange(val) {
      this.contractPhoCurrentPage = val;
      this.getContractPhoData();
    },
    // 获取 签约摄影师 的所有数据
    getContractPhoDatas() {
      let params = {
        module: "contractPhotographer",
      };
      this.$axios.post("/api/naturalDatas", params).then((res) => {
        let { data } = res;
        this.contractPhoTotal = data.length;
      });
    },
    // 获取 签约摄影师 的4个数据
    getContractPhoData() {
      // this.loadingPhotographer = true;
      let params = {
        module: "contractPhotographer",
        pageSize: this.contractPhoPageSize,
        currentPage: this.contractPhoCurrentPage,
      };
      this.$axios.post("/api/naturalData", params).then((res) => {
        let { data } = res;
        this.contractPhoData = null;//data;
        this.isAgreeFun(data, 'contractPhoData');
        // this.loadingPhotographer = false;

      });
    },
    /**
     * 热门  模块
     */
    // 改变 热门 的当前页
    hotHandleCurrentChange(val) {
      this.hotCurrentPage = val;
      this.getHotData();
    },
    // 获取 热门 的所有数据
    getHotDatas() {
      let params = {
        module: "hot",
      };
      this.$axios.post("/api/naturalDatas", params).then((res) => {
        let { data } = res;
        this.hotTotal = data.length;
      });
    },
    // 获取 热门 的4个数据
    getHotData() {
      this.loadingHot = true;
      let params = {
        module: "hot",
        pageSize: this.hotPageSize,
        currentPage: this.hotCurrentPage,
      };
      this.$axios.post("/api/naturalData", params).then((res) => {
        let { data } = res;
        this.hotData = data;
        this.loadingHot = false;
      });
    },
    // 关闭模态弹窗
    closeSelectedDialog() {
      this.selectedDialogVisible = false;
    },
    // 去该图片的详情页面
    toDetail(module, data, modeleFun) {
      this.dialogData = data;
      this.moduleName = module;
      this.modeleFun = modeleFun;
      this.selectedDialogVisible = true;
    },
    // 点赞
    agreeFun(id, agree, funName) {
      let params = {
        id,
        agree: Number(agree) + 1,
        user_id: this.userInfo.id,
        noAgree: false,
      };
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          // this.init();
          this[funName]();
        }
      });
    },
    // 取消点赞
    noAgreeFun(id, agree, funName) {
      let params = {
        id,
        agree: Number(agree) - 1,
        user_id: this.userInfo.id,
        noAgree: true,
      };
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          this[funName]();
        }
      });
    },
    // changeFunAgreeFun(id) {
    //   this.opusData.forEach(el => {
    //     if (el.id == id) {
    //       el.agree = Number(el.agree) + 1;
    //       el.support = true;
    //     }
    //   });
    // },
    // changeFunNoAgreeFun(id) {
    //   this.opusData.forEach(el => {
    //     if (el.id == id) {
    //       el.agree = Number(el.agree) - 1;
    //       el.support = false;
    //     }
    //   });
    // }
  },
};
</script>
<style scoped lang="scss">
.hotpicture {
  width: 1226px;
  margin: 0 auto;
  // margin-top: -100px;
  .topdiv {
    width: 1226px;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      color: rgba(0, 0, 0, 0.85);
      font-size: 1.4rem;
      line-height: 1.6rem;
      font-weight: 600;
    }
    .right {
      font-size: 1rem;
      line-height: 1.2rem;
      color: #1890ff;
    }
  }
}
.content {
  .spantextCotentBox {
    padding-bottom: 20px;
    background-color: #f7f8f9;
  }
  .content-title {
    background-color: #fff;
    box-shadow: 0 1px 0 0 rgb(0 0 0 / 5%);
    .titletext {
      width: 1200px;
      height: 50px;
      margin: 0 auto;
      line-height: 50px;
      .spantext {
        color: #262626;
        font-weight: 600;
      }
    }
  }
  .content-page {
    .connature {
      width: 1220px;
      // height: 364px;
      margin: 0 auto;
      .toptitle {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .contentpic {
        width: 100%;
        display: flex;
      }
      .onebox {
        margin-right: 30px;
        width: 280px;
        background-color: #fff;
        border-radius: 3px;
      }
      .textBox {
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        width: 250px;
        font-size: 16px;
        font-weight: bold;
      }
      .imgBox {
        width: 280px;
        height: 190px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        overflow: hidden;
      }
      .imgBtnBox {
        width: 280px;
        height: 130px;
        padding: 10px 5px;
        box-sizing: border-box;
      }
      .dispalyStyle {
        display: flex;
        // justify-content: space-between;
      }
      .imgStyle {
        width: 280px;
        height: 190px;
      }
      .equipmentBox {
        font-size: 14px;
        color: #999;
      }
      .equipmentBox {
        padding: 5px 0;
      }
      .supportDisplay {
        display: flex;
        justify-content: space-between;
      }
      .lookPersonBox {
        margin-right: 30px;
      }
      .supportBox,
      .lookPersonBox {
        color: #999;
        font-size: 14px;
      }
      .supportBox {
        width: 50px !important;
      }
      .downloadBtn {
        margin-left: 20px;
        margin-top: -10px;
      }
      .avatar {
        margin-right: 10px;
      }
      .userName {
        text-align: left;
        width: 120px;
        line-height: 30px;
        height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
      .dispalyJ {
        height: 40px;
        justify-content: space-between;
        border-top: 1px solid rgb(196, 196, 196);
        padding-top: 8px;
        font-size: 15px;
      }
      .pushTime {
        line-height: 30px;
        color: #999;
        font-size: 13px;
      }
      .hotStyle {
      }
      .hotItemBox {
        margin-right: 26px;
        background-color: #fff;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      .hotimg {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        width: 180px;
        height: 122px;
      }
      .hotTxt {
        color: #333;
        font-size: 13px;
        padding: 10px 0;
      }
      .mouseIn:hover {
        cursor: pointer;
        color: #1088f2;
      }
      .supportIconBox:hover {
        cursor: pointer;
      }
    }
  }
}
.ul-pic {
  display: flex;
  justify-content: space-evenly;
  img {
    width: 180px;
    height: 120px;
  }
}
.imgBoxPic {
  width: 180px;
  height: 120px;
  overflow: hidden;
}
.imgLabel:hover {
  transform: scale(1.5, 1.5);
}
</style>
